<template>
    <div id="one-message" :class="{'one-message':true, 'receiver':isReceiver, 'sender':!isReceiver}">
      <img v-show=isReceiver alt="Vue logo" src="../assets/logo.png" height="40pt" width="40pt">
      <div :class="{'message-bubble': true, 'receiverMsg': isReceiver, 'senderMsg': !isReceiver}">
        <div class="message-content">
          <i>{{ message }}</i> 
        </div>
        <buttonWIFI v-if="isReceiver&&this.requestType=='wifi' "></buttonWIFI>
        <buttonSupply v-if="isReceiver&&this.requestType=='supply' " :supply="this.request"></buttonSupply>
        <buttonRouter v-if="isReceiver&&this.requestType=='route' " :route="this.request"></buttonRouter>
        <room-number-input v-if="isReceiver&&this.requestType=='房间号' "></room-number-input>
        <buttonClean v-if="isReceiver&&this.requestType=='打扫服务' "></buttonClean>
      </div>
      <img v-show=!isReceiver alt="Vue logo" src="../assets/User.jpg" height="40pt" width="40pt">
    </div>
</template>

<script>
import buttonWIFI from '@/components_button/buttonWIFI.vue';
import buttonSupply from '@/components_button/buttonSupply.vue';
import buttonRouter from '@/components_button/buttonRouter.vue';
import RoomNumberInput from '@/components_button/RoomNumberInput.vue';
import buttonClean from '@/components_button/buttonClean.vue';

export default {
  components: { 
    buttonWIFI,
    buttonSupply,
    buttonRouter,
    RoomNumberInput,
    buttonClean,
  },
  //传入的消息（其内实质上是构造函数）
  props: {
    message: {
      type: String,
      required: true,
    },
    isReceiver: {
      type: Boolean,
      required: true,
    },
    request: String,
  },
  data(){
    return{
      requestType:"default",
    }
  },
  mounted(){
    this.$store.dispatch('sendRequest',
          this.request,
        )
    this.requestType=this.$store.getters.getRequestType;
    console.log("request: "+this.request+", type: "+this.requestType);
    // this.requestType=this.$store.getters.getRequestType(this.request);
  }
}
</script>


<style scoped>
.message-bubble {
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 10px;
  /*使控件最大宽度不超过网页的50%*/
  max-width: 50vw; 
}

.one-message {
  display: flex;
  align-items: start;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 10px;
  
}

.receiver {
  align-self: flex-start;
}

.sender {
  align-self: flex-end;
}

.receiverMsg {
  background-color:#eeffee;
  color: black;
  align-self: flex-start;
}

.senderMsg {
  background-color: #007bff;
  color: white;
  align-self: flex-end;
}

.message-content {
  word-wrap: break-word;
  text-align: left;
}

img{
  margin-right: 5pt;
  margin-left: 5pt;
}
</style>

